<!-- 联系人群列表 -->
<template>
  <div class="contact-group-list_box">
    <div
      v-for="item in list"
      :key="item.id"
      class="contact-group_item"
      :class="{ active: item.id === active }"
      @click="handleClick(item)"
    >
      <chat-avatar :content="getAvatar(item)"></chat-avatar>
      <div class="name">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { formateSize } from "@/utils/chat"
import chatAvatar from "./avatar.vue"

export default {
  components: { chatAvatar },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      active: ""
    }
  },
  mounted() {
    this.active = this.list[0] && this.list[0].id
    this.$emit("change", this.list[0])
  },

  methods: {
    getAvatar(item) {
      if (item.avatarList) {
        return item.avatarList.length > 0 ? item.avatarList : item.name
      } else {
        return item.avatar ? item.avatar : item.name
      }
    },
    handleClick(item) {
      this.active = item.id
      this.$emit("change", item)
    }
  }
}
</script>
<style lang="less" scoped>
.contact-group-list_box {
  .contact-group_item {
    display: flex;
    align-items: center;
    padding: 12px;
    .name {
      padding-left: 12px;
      font-size: 14px;
      color: #333333;
      letter-spacing: 0;
      line-height: 14px;
      font-weight: 600;
    }
  }
  .active {
    color: rgb(var(--color-primary));
    background: rgb(225, 230, 240, 0.6);
  }
}
</style>
